<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<script type="text/javascript">
	var IDMark_Switch = "_switch",
	IDMark_Icon = "_ico",
	IDMark_Span = "_span",
	IDMark_Input = "_input",
	IDMark_Check = "_check",
	IDMark_Edit = "_edit",
	IDMark_Remove = "_remove",
	IDMark_Ul = "_ul",
	IDMark_A = "_a";
	
	var setting = {
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
		}, 
		data: {
			simpleData: {
				enable: true
			}
		}
	};
	
	var zNodes =${treeJson};
	
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	});
		
	
	function addHoverDom(treeId, treeNode) {
		var aObj = $("#" + treeNode.tId + IDMark_A);
		if ($("#diyBtn1_"+treeNode.id).length>0) return;
		if ($("#diyBtn2_"+treeNode.id).length>0) return;
		if ($("#diyBtn3_"+treeNode.id).length>0) return;
		var html_add = "<span id='diyBtn1_space_" +treeNode.id+ "' >&nbsp;</span><span class='button icon-add' id='diyBtn1_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
		var html_edit = "<span id='diyBtn2_space_" +treeNode.id+ "' >&nbsp;</span><span class='button icon-update' id='diyBtn2_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
		var html_del = "<span id='diyBtn3_space_" +treeNode.id+ "' >&nbsp;</span><span class='button icon-delete' id='diyBtn3_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
		aObj.append(html_add+html_edit+html_del);
		var btn1 = $("#diyBtn1_"+treeNode.id);
		var btn2 = $("#diyBtn2_"+treeNode.id);
		var btn3 = $("#diyBtn3_"+treeNode.id);
		if (btn1) btn1.bind("click", function(event){
			$("#channelDiv").load("${basePath}/channel/toAdd", function() {
				$("#channelForm").find("input[name='channel.pid']").val(treeNode.id);
				$("#pname").val(treeNode.name);
			});
		});
		if (btn2) btn2.bind("click", function(event){
			var id = treeNode.id;
			if(id==0)
				alert("根节点不能编辑！！");
			else
				$("#channelDiv").load("${basePath}/channel/load/"+id);
		});
		if (btn3) btn3.bind("click", function(event){
			var id = treeNode.id;
			if(id==0)
				alert("根节点不能删除！！");
			else {
				if(window.confirm("确定删除？")) {
					$.ajax({
						url:"${basePath}/channel/del/"+id,
						dataType:"json"
					}).done(function(data){
						alert(data.msg);
						if(data.isSuccess) 
							afterDel(data.obj);
					})
				}
			}
		});
	}
	
	function removeHoverDom(treeId, treeNode) {
		$("#diyBtn1_"+treeNode.id).unbind().remove();
		$("#diyBtn1_space_" +treeNode.id).unbind().remove();
		$("#diyBtn2_"+treeNode.id).unbind().remove();
		$("#diyBtn2_space_" +treeNode.id).unbind().remove();
		$("#diyBtn3_"+treeNode.id).unbind().remove();
		$("#diyBtn3_space_" +treeNode.id).unbind().remove();
	}
	
	/* function onClick(event, treeId, treeNode, clickFlag) {
		console.info(event);
		console.info(clickFlag);
		var id = treeNode.id;
		if(id==0)
			alert("根节点不能编辑！！");
		else
			$("#channelDiv").load("${basePath}/channel/load/"+id);
	} */
	
	function initChannelTree() {
		$.ajax({
			url:"${basePath}/channel/tree",
			dataType:"json",
		}).done(function(data){
			$.fn.zTree.init($("#treeDemo"), setting, data);
		})
	}
	
	function saveChannel() {
		$.ajax({
			url:"${basePath}/channel/save",
			type:"post",
			data:$("#channelForm").serialize(),
			dataType:"json"
		}).done(function(data) {
			alert(data.msg);
			console.info(data);
			if(data.isSuccess) 
				afterSave(data.obj);
		})
	}
	
	
	function afterSave(obj) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		if(obj.isAdd) {
			var treeNode = zTree.getNodesByParam("id", obj.pid)[0];
			treeNode = zTree.addNodes(treeNode, {id:obj.id, name:obj.name}, false);
		} else {
			var treeNode = zTree.getNodesByParam("id", obj.id)[0];
			treeNode.name = obj.name;
			zTree.updateNode(treeNode);
		}
	}
	
	function afterDel(id) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		var treeNode = zTree.getNodesByParam("id", id)[0];
		zTree.removeNode(treeNode, false);
	}
	

</script> 
<style type="text/css">
	.ztree li span.demoIcon{padding:0 2px 0 10px;}
	.ztree li span.button.icon01{margin:0; background: url(${basePath}/css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon02{margin:0; background: url(${basePath}/css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon03{margin:0; background: url(${basePath}/css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon04{margin:0; background: url(${basePath}/css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon05{margin:0; background: url(${basePath}/css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon06{margin:0; background: url(${basePath}/css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon-add{margin:0; background: url(${basePath}/css/zTreeStyle/img/diy/add.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon-update{margin:0; background: url(${basePath}/css/zTreeStyle/img/diy/edit.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon-delete{margin:0; background: url(${basePath}/css/zTreeStyle/img/diy/delete.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>   
    
<div class="breadcrumbs" id="breadcrumbs">
	<script type="text/javascript">
		try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
	</script>
	<ul class="breadcrumb">
		<li>
			<i class="icon-home home-icon"></i>
			<a href="${basePath }/">首页</a>
		</li>

		<li class="active">频道管理</li>
	</ul><!-- .breadcrumb -->

</div>

<div class="page-content">
	<div class="page-header">
		<h1>
			频道管理
			<small>
				<i class="icon-double-angle-right"></i>
				频道的新增、修改、删除、查看
			</small>
		</h1>
	</div><!-- /.page-header -->

	<div class="row">
		<div class="col-xs-12">
			<!-- PAGE CONTENT BEGINS -->

			<div class="row">
				<div class="col-sm-6">
					<div class="widget-box">
						<div class="widget-header header-color-blue2">
							<h4 class="lighter smaller">频道树</h4>
						</div>

						<div class="widget-body">
							<div class="widget-main padding-8">
								<!-- <div id="tree1" class="tree"></div> -->
								<ul id="treeDemo" class="ztree"></ul>
							</div>
						</div>
					</div>
				</div>

				<div class="col-sm-6">
					<div class="widget-box">
						<div class="widget-header header-color-green2">
							<h4 id="channelDivTitle" class="lighter smaller">频道录入</h4>
						</div>

						<div class="widget-body">
							<div id="channelDiv" class="widget-main padding-8">
								
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- PAGE CONTENT ENDS -->
		</div><!-- /.col -->
	</div><!-- /.row -->
</div><!-- /.page-content -->
